<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 含有name属性的input */
        input[name]{
            color: red;
        }
        /* type=email的input */
        input[type='email']{
            color: blue;
        }
        /* type值以 t 开头的input */
        input[type^='t']{
            color: orange;
        }
        /* type值以l结尾的input */
        input[type$='1']{
            color: pink;
        }
        /* 只要class=one 的input(one必须是独立的class) */
        input[class~='one']{
            color: green;
        }
        /* 只要class中含有one的input(one不需要是独立的class) */
        input[class*='one']{
            color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 
        1. 属性选择器
            s1[HTML属性名]{ ... }
            匹配s1中含有HTML属性名的标签
            s1[HTML属性名=属性值]{ ... }
            匹配s1中含有HTML属性名的标签
            s1[HTML属性名^=属性值]{ ... }
            s1[HTML属性名$=属性值]{ ... }
            s1[HTML属性名~=属性值]{ ... }
            s1[HTML属性名*=属性值]{ ... }
     -->
    
    <form action="">
        昵称: <input type="text" name="userName" class="one two"> <br>
        电话: <input type="text" name="tel" class="one"> <br>
        邮箱: <input type="email" name="email" class="three xxxnexx"> <br>
        测试: <input type="text"><br>
        <input type="submit">
    </form>
</body>
</html>